<template>
  <ul>
      <li>props id:{{id}}</li>
      <li>props title:{{title}}</li>
      <li>props title:{{name}}</li>
      <hr>
      <li>ID:{{$route.params.id}}</li>
      <li>TITLE:{{Detail.title}}</li>
      <li>CONTENT:{{Detail.content}}</li>
  </ul>
</template>

<script>
const MessageDetail = [
    {id:1,title: "Message001", content:"Message001"},
    {id:3,title: "Message003", content:"Message003"},
    {id:5,title: "Message005", content:"Message005"},
]
export default {
  name: 'MessageDetail',
  props:['id', 'title', 'name'],
  data(){
      return{
          Detail:{}
      }
  },
  /* 
  只是数据的更新组件不会重新写一遍，要监视数据的变化$route的变化
  */
  mounted(){
      this.Message(this.$route)
  },
  watch:{
    //   $route:this.Message(value)
    $route:function(value){
        this.Message(value)
    }
  },
//   为了防止代码冗余，要进行封装
  methods:{
      Message(route){
          const id = route.params.id*1;
          setTimeout(()=>{
              const Detail = MessageDetail.find(item => item.id === id);
              this.Detail = Detail;
          },1000)
      }
  }
}
</script>

<style scoped>

</style>
